<template>
    <div class="loginbody">
        <div class="logindata">
            <div class="logintext">
                <h2>Welcome</h2>
            </div>
            <div class="formdata">
                <el-form>
                    <el-form-item>
                        <el-input
                            v-model="user.userName"
                            placeholder="请输入账号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model="user.userPassword"
                            clearable
                            placeholder="请输入密码"
                            show-password
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="tool">
                <div>
                    <el-checkbox>记住密码</el-checkbox>
                    <el-button type="text" @click="visitor">游客登录</el-button>
                </div>
            </div>
            <div class="butt">
                <el-button type="primary" @click.native.prevent="login"
                >登录</el-button
                >
                <el-button class="shou" @click="register">注册</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {userLogin, userLogout} from '../../api/user'
import store from '../../store'

export default {
  name: 'login',
  data () {
    return {
      user: {
        userName: '',
        userPassword: ''
      },
      illegal: '`~!@#$%^&*()_+-=【】、{}|：“；‘《》？/。，<>?.,":;[]（）——·！……',
      i: 0
      // sn: '', // 用户输入的账号
      // password: '' // 用户输入的密码
      // },
      // // 本地硬编码的用户信息，用于模拟登录
      // mockUser: {
      //   sn: '',
      //   password: ''
    }
  },
  methods: {
    login () {
      if (!this.verification()) return
      // 检查用户输入的账号和密码是否匹配硬编码用户信息
      userLogout().then(res => {
        // 清除前端的用户
        store.dispatch('user/clearUserInfo')
        userLogin(this.user).then(res => {
          if (res.status && res.data !== null) {
            if (res.data.userName !== '游客') {
              this.$message({
                message: '登陆成功',
                type: 'success'
              })
            }
            this.$router.push({path: '/main/first'})
          } else if (res.status) {
            this.$message({
              message: '用户名或密码错误',
              type: 'warning'
            })
          }
          console.info(res)
        })
      })
    },
    verification () {
      if (!this.user.userName) {
        this.$message.error('用户名不能为空，请输入用户名')
        return false
      }
      for (this.i = 0; this.i < this.illegal.length; this.i++) {
        if (this.user.userName.indexOf(this.illegal.charAt(this.i)) !== -1) {
          this.$message.error('用户名存在非法字符，请重新输入')
          return false
        }
      }
      if (!this.user.userPassword) {
        this.$message.error('密码不能为空，请输入密码')
        return false
      }
      return true
    },
    visitor () {
      this.user.userName = '游客'
      this.user.userPassword = '123456'
      this.login()
    },
    register () {
      this.$router.push({path: '/apply'}) // 点击注册时跳转到注册页面
    }
  }
}
</script>

<style scoped>
.loginbody {
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background-image: url("../../assets/images/bg.jpg");
    background-size: 100% 100%;
    background-position: center center;
    overflow: auto;
    background-repeat: no-repeat;
    position: fixed;
    line-height: 100%;
    padding-top: 150px;
}

.logintext {
    margin-bottom: 20px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

.logindata {
    width: 400px;
    height: 300px;
    transform: translate(-50%);
    margin-left: 50%;
}

.tool {
    display: flex;
    justify-content: space-between;
    color: #606266;
}

.butt {
    margin-top: 10px;
    text-align: center;
}

.shou {
    cursor: pointer;
    color: #606266;
}

/*ui*/
/* /deep/ .el-form-item__label {
  font-weight: bolder;
  font-size: 15px;
  text-align: left;
}

/deep/ .el-button {
  width: 100%;
  margin-bottom: 10px;

} */
</style>
